import columnsData, { ColumnsItem } from './data'
import React, { useRef } from 'react';
import { Modal, Descriptions, Button } from 'antd';
import type { ProColumns, ActionType } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { getWithdrawRecord } from './service'
import TableTitle from '../../../components/TableTitle';
import 'moment/locale/zh-cn';
import moment from 'moment';

export default () => {
  // 控制详情弹框的显示与隐藏
  const [withdrawRecordModal, setWithdrawRecordModal] = React.useState(false)
  // 储存当前查看数据
  const [withdrawRecord, setWithdrawRecord] = React.useState<ColumnsItem | undefined>(undefined)
  // 表头赋值
  const columns: ProColumns<ColumnsItem>[] = columnsData
  // 定义操作单元格
  const option: any = (text: number, record: ColumnsItem) => [
    <a key='check'
      onClick={() => handleDetails(record)}
    >
      查看
    </a>
  ]
  // 定义金额单元格
  const Amount: any = (text: number) => [
    <p
      key='amount'
      style={{ textAlign: 'right', margin: 0 }}
    >
      {typeof text === 'number' ? text.toFixed(6) : null}
    </p>
  ]

  // 列渲染样式赋值
  columns.forEach(item => {
    item.dataIndex === 'withdrawAmt' ? item.render = Amount : undefined
    item.dataIndex === 'fee' ? item.render = Amount : undefined
    item.dataIndex === 'amt' ? item.render = Amount : undefined
    item.valueType === 'option' ? item.render = option : undefined
  })
  // Table action 的引用，便于自定义触发
  const actionRef = useRef<ActionType>();

  /**
   * 查看按钮回调
   * @param txNO 流水号
   */
  const handleDetails = (record: ColumnsItem) => {
    setWithdrawRecord(record)
    setWithdrawRecordModal(true)
  }

  return (
    <div>
      {/* 表格 */}
      <ProTable<ColumnsItem>
        scroll={{ x: 900 }}
        bordered
        headerTitle={<TableTitle title='提现交易' />}
        columns={columns}
        actionRef={actionRef}
        // 请求获取的数据
        request={
          async params => {
            console.log(params);
            let res = await getWithdrawRecord({ ...params, pageNum: params.current, sign: 0 })
            console.log(res);
            return {
              data: res.body.list,
              total: res.body.total,
            }
          }
        }
        // 本地储存表格列的显示参数
        columnsState={{
          persistenceKey: 'withdrawRecordList',
          persistenceType: 'localStorage',
        }}
        // 每行表格的key
        rowKey="txNo"
        // 搜索表单布局配置
        search={{
          labelWidth: 'auto',
        }}
        // 分页相关配置
        pagination={{
          // 初始页面数据条数
          pageSize: 10,
        }}
        dateFormatter="string"
      />
      <Modal
        title='提现记录'
        width={1000}
        centered
        visible={withdrawRecordModal}
        footer={
          <Button
            type="primary"
            htmlType="submit"
            onClick={() => setWithdrawRecordModal(false)}
          >
            确认
          </Button>}
        onCancel={() => setWithdrawRecordModal(false)}
      >
        <Descriptions
          column={{ xxl: 4, xl: 4, lg: 4, md: 3, sm: 2, xs: 1 }}
        >
          <Descriptions.Item label="提现客户">{withdrawRecord?.custNo}</Descriptions.Item>
          <Descriptions.Item label="客户类别">{withdrawRecord?.custType === 'C' ? '商户' : '会员'}</Descriptions.Item>
          <Descriptions.Item label="交易日期">{withdrawRecord?.txDte}</Descriptions.Item>
          <Descriptions.Item label="汇率">{withdrawRecord?.exgRate}</Descriptions.Item>
          <Descriptions.Item label="提现方式">{withdrawRecord?.withdrawMethod === '0' ? '链钱包' : '法币银行账户'}</Descriptions.Item>
          <Descriptions.Item label="提现账号">{withdrawRecord?.withdrawAcctNo}</Descriptions.Item>
          {
            withdrawRecord?.withdrawMethod === '0' ?
              <Descriptions.Item label="目标钱包">{withdrawRecord?.chainWalletUrl} </Descriptions.Item> :
              <Descriptions.Item label="目标账号">{withdrawRecord?.acctNo} </Descriptions.Item>
          }
          <Descriptions.Item label="交易流水">{withdrawRecord?.txNo}</Descriptions.Item>
          <Descriptions.Item label="提现金额">{withdrawRecord?.withdrawAmt?.toFixed(6)}</Descriptions.Item>
          <Descriptions.Item label="提现币别">{withdrawRecord?.withdrawalCcy} </Descriptions.Item>
          <Descriptions.Item label="手续费">{withdrawRecord?.fee?.toFixed(6)}</Descriptions.Item>
          <Descriptions.Item label="手续费币别">{withdrawRecord?.feeCcy} </Descriptions.Item>
          <Descriptions.Item label="预计到账金额">{withdrawRecord?.amt?.toFixed(6)}</Descriptions.Item>
          <Descriptions.Item label="到账币别">{withdrawRecord?.inAcctCcy} </Descriptions.Item>
          <Descriptions.Item label="交易状态">
            {
              withdrawRecord?.txStatus === '1' ?
                '失败' :
                withdrawRecord?.txStatus === '0' ?
                  '成功' :
                  null
            }
          </Descriptions.Item>
          {
            withdrawRecord?.txStatus === '1' ?
              <Descriptions.Item label="失败原因"> {withdrawRecord?.result}</Descriptions.Item> :
              null
          }
        </Descriptions>
      </Modal>
    </div>
  );
};